<template>
  <view class="viewport">
    <scroll-view enable-back-to-top scroll-y class="scroll">
      <uni-section title="我的页面主题" type="line">
        <view class="example">
          <view>
            <image
              :src="imgUrl.my"
              @click="changeImg('my')"
              style="border: 1rpx solid; height: 400rpx; object-fit: cover"
              :style="{ opacity: form.MyOpacit / 10 }"
            ></image>
            <slider :value="form.MyOpacit" min="0" max="10" show-value @change="myChangeOpacit" />
          </view>
        </view>
      </uni-section>
      <uni-section title="明细页面主题" type="line">
        <view class="example">
          <view>
            <image
              :src="imgUrl.detail"
              @click="changeImg('detail')"
              style="border: 1rpx solid; height: 400rpx; object-fit: cover"
              :style="{ opacity: form.DetailOpacit / 10 }"
            ></image>
            <slider
              :value="form.DetailOpacit"
              min="0"
              max="10"
              show-value
              @change="detailChangeOpacit"
            />
          </view>
        </view>
      </uni-section>
      <uni-section title="我的统计主题" type="line">
        <view class="example">
          <view>
            <image
              :src="imgUrl.count"
              @click="changeImg('count')"
              style="border: 1rpx solid; height: 400rpx; object-fit: cover"
              :style="{ opacity: form.CountOpacit / 10 }"
            ></image>
            <slider
              :value="form.CountOpacit"
              min="0"
              max="10"
              show-value
              @change="countChangeOpacit"
            />
          </view>
        </view>
      </uni-section>
      <uni-section title="记账页面主题" type="line">
        <view class="example">
          <view>
            <image
              :src="imgUrl.noteAccount"
              @click="changeImg('noteAccount')"
              style="border: 1rpx solid; height: 400rpx; object-fit: cover"
              :style="{ opacity: form.NoteAccoutOpacit / 10 }"
            ></image>
            <slider
              :value="form.NoteAccoutOpacit"
              min="0"
              max="10"
              show-value
              @change="noteAccountChangeOpacit"
            />
          </view>
        </view>
      </uni-section>
      <uni-section title="资产页面主题" type="line">
        <view class="example">
          <view>
            <image
              :src="imgUrl.zichan"
              @click="changeImg('zichan')"
              mode="aspectFill"
              style="border: 1rpx solid; height: 400rpx"
              :style="{ opacity: form.ZichanOpacit / 10 }"
            ></image>
            <slider
              :value="form.ZichanOpacit"
              min="0"
              max="10"
              show-value
              @change="zichanChangeOpacit"
            />
          </view>
        </view>
      </uni-section>
      <button class="button btn" @click="ok">确认</button>
      <button class="button btn" @click="back">取消</button>
    </scroll-view>
  </view>
</template>
<script setup lang="ts">
import { GetUserSettingAPI, UpdateUserSettingAPI } from '@/services/detail'
import { SearchFileOneAPI } from '@/services/img'
import { useMemberStore } from '@/stores'
import type { UserSetting } from '@/types/detail'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

//============================以下变量========================
const route = useRoute()
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 获取会员信息
const ready = ref(false)
const memberStore = useMemberStore()

const imgUrl = ref({
  my: '',
  detail: '',
  count: '',
  noteAccount: '',
  zichan: '',
})
const form = ref<UserSetting>({
  UserName: '',
  IsAmount: false,
  IsSearchSelf: false,
  DefaultAccountNo: '',
  DefaultOutAccountNo: '',
  DefaultInAccountNo: '',
  DefaultNoteAccountNo: '',
  MyOpacit: 8,
  DetailOpacit: 8,
  CountOpacit: 8,
  NoteAccoutOpacit: 8,
  ZichanOpacit: 8,
  TagSelf: '',
  SoftStyle: '',
})
//============================以下函数========================
//加载初始化
onLoad(async () => {
  await reFresh()
})
onShow(async () => {
  await reFresh()
})
const changeImg = (imgType: string) => {
  if (memberStore.profile) {
    uni.navigateTo({
      url: '/pages/my/fileUpload?ImgType=' + imgType + '&UserName=' + memberStore.profile.UserName,
    })
  }
}
const myChangeOpacit = (e: any) => {
  form.value.MyOpacit = e.detail.value
}
const detailChangeOpacit = (e: any) => {
  form.value.DetailOpacit = e.detail.value
}
const countChangeOpacit = (e: any) => {
  form.value.CountOpacit = e.detail.value
}
const noteAccountChangeOpacit = (e: any) => {
  form.value.NoteAccoutOpacit = e.detail.value
}
const zichanChangeOpacit = (e: any) => {
  form.value.ZichanOpacit = e.detail.value
}
//刷新事件
const reFresh = async () => {
  if (memberStore.profile) {
    const res = await GetUserSettingAPI({
      UserName: memberStore.profile.UserName,
    })
    form.value = res.result
    const my = await SearchFileOneAPI({
      UserName: memberStore.profile.UserName,
      ImgType: 'my',
      ID: 0,
    })
    imgUrl.value.my = my.result?.ImgUrl

    const detail = await SearchFileOneAPI({
      UserName: memberStore.profile.UserName,
      ImgType: 'detail',
      ID: 0,
    })
    imgUrl.value.detail = detail.result?.ImgUrl

    const count = await SearchFileOneAPI({
      UserName: memberStore.profile.UserName,
      ImgType: 'count',
      ID: 0,
    })
    imgUrl.value.count = count.result?.ImgUrl

    const noteAccount = await SearchFileOneAPI({
      UserName: memberStore.profile.UserName,
      ImgType: 'noteAccount',
      ID: 0,
    })
    imgUrl.value.noteAccount = noteAccount.result.ImgUrl

    const zichan = await SearchFileOneAPI({
      UserName: memberStore.profile.UserName,
      ImgType: 'zichan',
      ID: 0,
    })
    imgUrl.value.zichan = zichan.result?.ImgUrl
  } else {
    uni.showToast({ icon: 'none', title: '请先登录' })
    setTimeout(() => {
      // 页面跳转
      uni.switchTab({ url: '/pages/my/my' })
    }, 500)
  }
}
//返回
const back = () => {
  uni.switchTab({ url: '/pages/my/my' })
}
//确认
const ok = async () => {
  await UpdateUserSettingAPI(form.value)
  // 成功提示
  uni.showToast({ icon: 'success', title: '保存成功' })
  setTimeout(() => {
    // 页面跳转
    uni.switchTab({ url: '/pages/my/my' })
  }, 500)
}
</script>
<style lang="scss">
@import './styles/theme.scss';
</style>
